<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>water_electricity</title>
    <link rel="stylesheet" href="../../../static/layer/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../../../static/css/font-awesome.min.css" media="all">
    <style>
        .layui-table-cell {
            height: auto;
        }

        .layui-tab-content {
            padding: 0;
        }
    </style>
    <style>
        /* 导航样式 */
        .layui-tab-title {
            height: auto;
        }

        .layui-tab-card > .layui-tab-title .layui-tab-bar {
            height: 60px;
            line-height: 60px;
        }

        .layui-nav .layui-nav-item a {
            color: #666666;
        }

        .layui-nav .layui-nav-item a:hover {
            color: #000000;
        }

        .layui-tab-card > .layui-tab-title .layui-this {
            background-color: transparent;
        }

        .layui-tab-card > .layui-tab-title .layui-this a {
            color: #000000;
        }

        .layui-tab-card > .layui-tab-title .layui-this::after {
            content: '';
            bottom: 0;
            width: 100%;
            position: absolute;
            left: 0;
            top: 55px;
            height: 6px;
            background-color: #5FB878;
            transition: all .2s;
            -webkit-transition: all .2s;
        }

        .layui-anim-upbit {
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>

<body>
<div class="layui-tab layui-tab-brief" lay-filter="filter">
    <ul class="layui-tab-title">
        <li class="layui-this">电表设置</li>
        <li>水表设置</li>
        <li>默认单价设置</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show" style="padding: 10px;">
            <div class="operateTable">
                <button class="layui-btn AUTH-SDBSZ_SDBXZ" data-type="addE"><i class="layui-icon"></i> 新增总表</button>
                <span style="margin-left: 30px" class="AUTH-SDBSZ_SDBCBR">抄表日：每月
                    <div class="layui-inline" style="width: 60px">
                        <input class="layui-input" type="number" name="READ_DAY" id="READ_DAY" placeholder=""
                               autocomplete="off" value="">
                    </div>
                    号
                    <button class="layui-btn " data-type="edit_read_day"><i class="layui-icon"></i>确定</button>
                </span>
            </div>
            <table class="layui-hidden" id="eTreeTable" lay-filter="treeTable"></table>
        </div>
        <div class="layui-tab-item" style="padding: 10px;">
            <div class="operateTable">
                <button class="layui-btn AUTH-SDBSZ_SDBXZ" data-type="addW"><i class="layui-icon"></i> 新增总表</button>
                <span style="margin-left: 30px" class="AUTH-SDBSZ_SDBCBR">抄表日：每月
                    <div class="layui-inline" style="width: 60px">
                        <input class="layui-input doNotHaveToFillIn" type="number" name="READ_DAY_WATER" id="READ_DAY_WATER" placeholder="" autocomplete="off" value="">
                    </div>
                    号
                    <button class="layui-btn" data-type="edit_read_day_WATER"><i class="layui-icon"></i>确定</button>
                </span>
            </div>
            <table class="layui-hidden" id="wTreeTable" lay-filter="treeTable"></table>
        </div>
        <div class="layui-tab-item">
            <div class="layui-tab layui-tab-card" style="margin: 0;">
                <ul class="layui-nav layui-tab-title layui-bg-gray">
                </ul>
                <div style="padding: 10px;">
                    <table class="layui-hidden" id="priceTable" lay-filter="priceTable"></table>
                </div>
            </div>
        </div>
        <div id="barDemo" style="display: none">
            {{#  if(d.BTYPE == 0){ }}
            <a class="layui-btn layui-btn-mini AUTH-SDBSZ_SDBXZ" lay-event="addZFB">新增总分表</a>
            <a class="layui-btn layui-btn-mini AUTH-SDBSZ_SDBXZ" lay-event="addZB">新增子表</a>
            <a class="layui-btn layui-btn-warm layui-btn-mini AUTH-SDBSZ_SDBBJ" lay-event="editZFB">修改</a>
            {{# } else { }}
            <a class="layui-btn layui-btn-warm layui-btn-mini AUTH-SDBSZ_SDBBJ" lay-event="editZB">修改</a>
            {{# } }}

            <!--<a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="change">换表</a>-->
            <a class="layui-btn layui-btn-danger layui-btn-mini AUTH-SDBSZ_SDBSC" lay-event="del">删除</a>
        </div>
        <script type="text/html" id="nameTpl">
            <pre>{{d.NAME}}</pre>
        </script>
        <script type="text/html" id="attrTpl">
            {{# var attr = d.ATTR }}
            {{# if (attr == '0'){ }}
            <span>普通表</span>
            {{# } else{ }}
            <span>智能表</span>
            {{# } }}
        </script>
        <script type="text/html" id="cardTpl">
            {{# var card = d.IS_CARD }}
            {{# if (card == '0'){ }}
            <span>否</span>
            {{# } else{ }}
            <span>是</span>
            {{# } }}
        </script>
    </div>
</div>
<script type="text/javascript" src="../../../static/layer/layui.js"></script>
<script>
    layui.use(['jquery', 'table', 'form', 'layer', 'element', 'treeGrid'], function () {
        var table = layui.table,
            $ = layui.jquery,
            treeGrid = layui.treeGrid,
            element = layui.element,
            layer = layui.layer,
            form = layui.form;

        var tab = 0;

        var bid = "";

        var active = {
            // tab切换后初始化数据
            initTable: function (index) {
                if (index == 0) {
                    var eTreeTable = treeGrid.render({
                        elem: '#eTreeTable'
                        , url: '/hydropowerSetting/list.do'
                        , where: {TYPE: 'b938139a48ed4344a11a7180b48eede6'}
                        , cellMinWidth: 100
                        , treeId: 'ID'//树形id字段名称
                        , treeUpId: 'PID'//树形父id字段名称
                        , treeShowName: 'CODE'//以树形式显示的字段
                        , cols: [[
                            /*{type: 'checkbox'},*/
                            {field: 'CODE', width: '300', title: '电表编号'}
                            , {field: 'NAME', width: '300', title: '关联商圈/楼宇/项目名称', templet: '#nameTpl'}
                            , {field: 'ATTR', width: '100', title: '电表属性', align: 'center', templet: '#attrTpl'}
                            , {field: 'IS_CARD', width: '80', title: '插卡式', align: 'center', templet: '#cardTpl'}
                            , {field: 'RATES', width: '80', title: '表倍率', align: 'center'}
                            , {title: '操作', width: 340, align: 'right', toolbar: '#barDemo'}
                        ]]
                        , page: false
                    });
                } else if (index == 1) {
                    var wTreeTable = treeGrid.render({
                        elem: '#wTreeTable'
                        , url: '/hydropowerSetting/list.do'
                        , where: {TYPE: 'ae5806f8184546208411b99e6117eaa2'}
                        , cellMinWidth: 100
                        , treeId: 'ID'//树形id字段名称
                        , treeUpId: 'PID'//树形父id字段名称
                        , treeShowName: 'CODE'//以树形式显示的字段
                        , cols: [[
                            /*{type: 'checkbox'},*/
                            {field: 'CODE', width: '300', title: '水表编号'}
                            , {field: 'NAME', width: '300', title: '关联商圈/楼宇/项目名称', templet: '#nameTpl'}
                            , {field: 'ATTR', width: '100', title: '水表属性', align: 'center', templet: '#attrTpl'}
                            , {field: 'IS_CARD', width: '80', title: '插卡式', align: 'center', templet: '#cardTpl'}
                            , {field: 'RATES', width: '80', title: '表倍率', align: 'center'}
                            , {title: '操作', width: 340, align: 'right', toolbar: '#barDemo'}
                        ]]
                        , page: false
                    });
                } else if (index == 2) {
                    active.initTop();
                }
            }
            // 添加电表总表
            , addE: function (pid) {
                layer.open({
                        type: 2,
                        title: '新增电表',
                        shadeClose: false,
                        shade: [0.3],
                        maxmin: true, //开启最大化最小化按钮
                        area: ['90%', '90%'],
                        scrollbar: false, //屏蔽滚动条
                        content: 'operate.html?type=add&btype=0&lx=0&pid=' + pid
                    });
            }
            // 添加水表总表
            , addW: function (pid) {
                layer.open({
                    type: 2,
                    title: '新增水表',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate.html?type=add&btype=0&lx=1&pid=' + pid
                });
            }
            // 添加子表
            , addZB: function (pid) {
                layer.open({
                    type: 2,
                    title: '新增子表',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate_zb.html?type=add&btype=1&lx=' + tab + '&pid=' + pid
                });
            }
            // 修改表
            , edit: function (id) {
                layer.open({
                    type: 2,
                    title: '修改总分表',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate.html?type=edit&btype=0&lx=' + tab + '&id=' + id
                });
            }
            // 修改子表
            , editZB: function (id) {
                layer.open({
                    type: 2,
                    title: '修改子表',
                    shadeClose: false,
                    shade: [0.3],
                    maxmin: true, //开启最大化最小化按钮
                    area: ['90%', '90%'],
                    scrollbar: false, //屏蔽滚动条
                    content: 'operate_zb.html?type=edit&btype=1&lx=' + tab + '&id=' + id
                });
            }
            // 初始化头部
            , initTop: function () {
                $.ajax({
                    url: "/business/list",
                    data: {},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            $(".layui-nav").empty();
                            var off = '<span class="layui-badge-rim">未开启</span>';
                            var str = '';
                            for (var i = 0; i < res.data.length; i++) {
                                if (res.data[i].IS_OPEN === "on") {
                                    str = '<li class="layui-nav-item" data-type="changeBusiness" data-id="' + res.data[i].ID + '"><a href="javascript:;">' + res.data[i].BUSINESS_NAME + '</a></li>';
                                } else if (res.data[i].IS_OPEN === "off") {
                                    str = '<li class="layui-nav-item" data-type="changeBusiness" data-id="' + res.data[i].ID + '"><a href="javascript:;">' + res.data[i].BUSINESS_NAME + off + '</a></li>';
                                }
                                $(".layui-nav").append(str);
                            }

                            $('.layui-nav .layui-nav-item').on('click', function () {
                                var type = $(this).data('type');
                                active[type] ? active[type]($(this)) : '';
                            });

                            element.init();

                            $(".layui-nav .layui-nav-item").eq(0).click();

                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
            }
            // 商圈切换
            , changeBusiness: function (obj) { //获取选中数据
                bid = obj.data("id");
                active.initMrjg(bid);
            }
            , initMrjg: function (businessId) {
                table.render({
                    elem: '#priceTable',
                    url: '/hydropowerSetting/priceList/',
                    page: true,
                    limit: 20,
                    height: 'full-150',
                    where: {"BUSINESS_ID": businessId},
                    cols: [[
                        {field: 'BUILDING_NAME', title: '楼宇名称', width: 300}
                        , {field: 'ELETRIC_PRICE', title: '电表默认单价（元/度）', width: 250, edit: 'text'}
                        , {field: 'WATER_PRICE', title: '水表默认单价（元/吨）', width: 250, edit: 'text'}
                    ]]
                });
            }
            //编辑电表
            ,edit_read_day:function (d) {
                var READ_DAY=$("#READ_DAY").val();
                var x=parseInt(READ_DAY);
                if (isNaN(x) || x<1 || x>31) {
                    layer.msg("请输入正确的日期");
                    return false;
                }
                var data={};
                data.READ_DAY=READ_DAY;
                data.TYPE="b938139a48ed4344a11a7180b48eede6";
                $.ajax({
                    url: "/hydropowerSetting/edit_read_day",
                    data: data,
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            layer.msg(res.errmsg, function () {
                            });
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
            }
            //编辑水表
            ,edit_read_day_WATER:function (d) {
                var READ_DAY=$("#READ_DAY_WATER").val();
                var x=parseInt(READ_DAY);
                if (isNaN(x) || x<1 || x>31) {
                    layer.msg("请输入正确的日期");
                    return false;
                }
                var data={};
                data.READ_DAY=READ_DAY;
                data.TYPE="ae5806f8184546208411b99e6117eaa2";
                $.ajax({
                    url: "/hydropowerSetting/edit_read_day",
                    data: data,
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            layer.msg(res.errmsg, function () {
                            });
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
            }
            ,init_read_day:function () {
                $.ajax({
                    url: "/hydropowerSetting/init_read_day",
                    data: {TYPE:"b938139a48ed4344a11a7180b48eede6"},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            res.data&&$("#READ_DAY").val(res.data.READ_DAY);
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
            }
            ,init_read_day_water:function () {
                $.ajax({
                    url: "/hydropowerSetting/init_read_day",
                    data: {TYPE:"ae5806f8184546208411b99e6117eaa2"},
                    dataType: "json",
                    type: "post",
                    async: false,
                    success: function (res) {
                        if (res.errcode === "0") {
                            res.data&&$("#READ_DAY_WATER").val(res.data.READ_DAY);
                        } else if (res.errcode === "1") {
                            layer.msg(res.errmsg, function () {
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.error(XMLHttpRequest.status);
                        console.error(XMLHttpRequest.readyState);
                        console.error(textStatus);
                    }
                });
            }
        };

        layui.data.pActive = active;

        //首次打开初始化
        active.initTable(0);
        active.init_read_day();//回显电表
        active.init_read_day_water();//回显shuibiao


        $('.operateTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this, '0') : '';
        });

        //监听tab切换
        element.on('tab(filter)', function (data) {
            tab = data.index;
            active.initTable(data.index);
        });

        //监听工具条
        treeGrid.on('tool(treeTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'addZFB') {
                if (tab == 0) {
                    active.addE(data.ID);
                } else if (tab == 1) {
                    active.addW(data.ID);
                }
            } else if (obj.event === 'addZB') {
                active.addZB(data.ID);
            } else if (obj.event === 'editZFB') {
                active.edit(data.ID);
            } else if (obj.event === 'editZB') {
                active.editZB(data.ID);
            } else if (obj.event === 'change') {
                layer.msg(data.ID + " change");
            } else if (obj.event === 'del') {
                layer.confirm('确认删除当前表及子表吗', {offset: '150px'}, function (index) {
                    layer.close(index);
                    $.ajax({
                        url: "/hydropowerSetting/del",
                        data: {ID: data.ID},
                        dataType: "json",
                        type: "post",
                        async: false,
                        success: function (res) {
                            if (res.errcode === "00") {
                                active.initTable(tab);
                                layer.msg("表已删除", {offset: '150px'});   // 弹出删除成功
                            } else if (res.errcode === "01") {
                                layer.msg(res.errmsg, function () {
                                });
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            console.error(XMLHttpRequest.status);
                            console.error(XMLHttpRequest.readyState);
                            console.error(textStatus);
                        }
                    });
                });
            }
        });

        //监听单元格编辑
        table.on('edit(priceTable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.ajax({
                url: "/hydropowerSetting/editPrice",
                data: {BUILDING_ID: data.BUILDING_ID, TYPE: field, VALUE: value},
                dataType: "json",
                type: "post",
                async: false,
                success: function (res) {
                    if (res.errcode === "00") {
                        active.initMrjg(bid);
                        layer.msg("已修改成功", {offset: '150px'});   // 弹出修改成功
                    } else if (res.errcode === "01") {
                        layer.msg(res.errmsg, function () {
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.error(XMLHttpRequest.status);
                    console.error(XMLHttpRequest.readyState);
                    console.error(textStatus);
                }
            });
        });
    });
</script>
<script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../../static/js/common/authUtils.js"></script>
</body>

</html>